@inherits BaseInputBlock<string?>

@namespace FluentCMS.Web.Plugins

@if (Visible)
{
    <FormField Cols="Cols" Dense="@Dense" Id="@Id" Hint="@Hint" Label="@Label" LabelFragment="@LabelFragment" Required="@Required">
        <div class="@this.ClassName("FormRichTextEditorWrapper")">
            <div class="@this.GetClasses()" @attributes="AdditionalAttributes" @ref="Element" />
        </div>
    </FormField>

    @if (LinkModalOpen)
    {
        <Modal Size="ModalSize.Large" OnClose="OnLinkModalClose">
            <ModalHeader>
                <ModalTitle>
                    Add link
                </ModalTitle>
            </ModalHeader>
            <ModalBody>
                <Tabs Active="@Mode">
                    <TabList>
                        <TabItem Name="Page">Page</TabItem>
                        <TabItem Name="File">File</TabItem>
                        <TabItem Name="External">External</TabItem>
                    </TabList>
                    <TabContent>
                        <TabPanel Name="Page">
                            <DataTable Items="Pages">
                                <DataTableItem Label="Title">@context.Title</DataTableItem>
                                <DataTableItem Label="Path">@context.Path</DataTableItem>
                                <DataTableItem>
                                    <Stack>
                                        <Button Color="Color.Primary" Size="ButtonSize.Small" @onclick="() => OnChoosePage(context)">
                                            Choose
                                        </Button>
                                    </Stack>
                                </DataTableItem>
                            </DataTable>
                            <Spacer />
                            <Stack>
                                <Button @onclick="OnLinkModalClose">Cancel</Button>
                                @if (ShowClearButton)
                                {
                                    <Button Color="Color.Danger" @onclick="OnLinkClear">Clear</Button>
                                }
                            </Stack>

                        </TabPanel>
                        <TabPanel Name="File">
                            <FileSelectorModal OnSubmit="OnChooseFile" OnCancel="OnLinkModalClose" />
                            <Spacer />
                            <Stack>
                                <Button @onclick="OnLinkModalClose">Cancel</Button>
                                <Button Color="Color.Primary" @onclick="OnUpload">Upload file here</Button>
                                @if (ShowClearButton)
                                {
                                    <Button Color="Color.Danger" @onclick="OnLinkClear">Clear</Button>
                                }
                            </Stack>
                        </TabPanel>
                        <TabPanel Name="External">
                            <Grid>
                                <FormInput Label="Url" Placeholder="Enter url" @bind-Value="Href" />
                                <FormInput Label="Text" Placeholder="Enter text" @bind-Value="Text" />
                                <GridItem Small="GridItemColumn.Twelve">
                                    <Stack>
                                        <Button @onclick="OnLinkModalClose">Cancel</Button>
                                        @if (ShowClearButton)
                                        {
                                            <Button Color="Color.Danger" @onclick="OnLinkClear">Clear</Button>
                                        }
                                        <Button Color="Color.Primary" @onclick="OnChooseExternal">Done</Button>
                                    </Stack>
                                </GridItem>
                            </Grid>
                        </TabPanel>
                    </TabContent>
                </Tabs>
                
            </ModalBody>
        </Modal>
    }
    @if (ImageModalOpen)
    {
        <FileSelectorModal OnCancel="OnImageModalClose" OnSubmit="OnChooseImage"/>
    }

    <InputFile style="display: none" Id="@($"upload-{Id}")" OnChange="OnFilesChanged"/>
}